<template>
  <div class="login-container table-container">
    <VueFastTable />
  </div>
</template>

<script setup lang="ts" name="loginIndex">
import { ref, onMounted, reactive, computed, defineAsyncComponent } from 'vue'
import JsonData from '../../public/resource/target.json'
// @ts-ignore
const VueFastTable = defineAsyncComponent(() => import('./VueFastTable.vue'))

const dialogVisible = ref(false)
const scopeRow = ref()
const state = reactive({
  ...JsonData,
  items: [
    {
      date: 1233
    },
    {
      date: 4566
    }
  ],

  columns: [],
  options: {
    rowHeight: 60
  },
  dialogTitle: '',
  context: '',
  weight: '',
  editingData: {}, // 存储正在编辑的数据
  currentCourseIndex: -1, // 存储当前课程的索引
  currentPointIndex: -1 // 存储当前指标点的索引
})

const columns = [
  {
    key: 'requestName',
    dataKey: 'requestName',
    title: '毕业要求',
    width: 100
  },
  {
    key: 'pointDtos',
    dataKey: 'pointDtos',
    title: '指标',
    width: 500
  }
]

const tableWidth = 1000
const tableHeight = 600

const showDialog = (rowData: any, item: any) => {
  scopeRow.value = item
  state.dialogTitle = `${rowData.requestName} - ${item.pointName}`
  state.editingData = { context: item.context, weight: item.weight }
  dialogVisible.value = true
}
const onSubmit = () => {
  scopeRow.value.context = state.context
  scopeRow.value.weight = state.weight
  // 更新源数据
  state.context = ''
  state.weight = ''
  state.currentCourseIndex = -1
  state.currentPointIndex = -1
  dialogVisible.value = false
}
const formattedCourses = computed(() => {
  return state.courses.map((courses) => {
    // 找到与课程相关的毕业要求
    const graduationRequirements = state.graduationRequirements
      .map((req) => ({
        ...req,
        points: req.pointDtos.filter((point: Record<string, any>) =>
          courses.points.some((cp: Record<string, any>) => {
            if (cp.pointId === point.pointId) {
              point.context = cp.context
              point.weight = cp.weight
              point.courseTitle = courses.course
              return true
            }
          })
        )
      }))
      // 过滤掉没有与之相关的指标点的毕业要求
      .filter((req) => req.points.length > 0)

    return {
      ...courses,
      graduationRequirements
    }
  })
})

// 页面加载时
onMounted(() => {})
</script>

<style scoped lang="scss">
.table_wrap_scroll {
  height: 80vh;
  overflow: auto;
}
.table_v2_ply {
  display: flex;
  overflow: auto;
  .table_v2_row {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.table_v2_tag {
  margin-right: 20px;
}
</style>
